﻿/// <reference path="../Libs/jquery-2.0.2.js" />
define(["jquery", "mustache"], function ($, Mustache) {

    function buildLoginForm() {
        var html =
            '<div id="login-form-holder">' +
				'<form>' +
					'<div id="login-form">' +
						'<input type="text" id="tb-login-username" placeholder="Enter your username"><br />' +
						'<input type="password" id="tb-login-password" placeholder="Enter your password"><br />' +
						'<button id="login-button" class="blue">Login</button>' +
					'</div>' +
					'<div id="register-form" style="display: none">' +
						'<input type="text" id="tb-register-username" placeholder="Enter your username"><br />' +
						'<input type="text" id="tb-register-nickname" placeholder="Enter your nickname"><br />' +
						'<input type="password" id="tb-register-password" placeholder="Enter your password"><br />' +
						'<button id="register-button" class="blue">Register</button>' +
					'</div>' +
					'<a href="#" id="show-login-button" class="blue selected">Login</a>' +
					'<a href="#" id="show-register-button" class="blue">Register</a>' +
				'</form>' +
				'<div id="error-messages"></div>' +
            '</div>';
        return html;
    }

    function buildLogoutButton(selector,nickname) {
        var logoutButton = '<div id="mrusenPEdal"><h3 id="user-nickname">Hey, ' +
				nickname +
                '<button id="logout-button" class="blue">Logout</button><h3/>';

        logoutButton += '<a href="#/">Home</a> | ';
        logoutButton += '<a href="#/active-games">Active games</a> | ';
        logoutButton += '<a href="#/open-games">Open games</a></div>';

        $("header#message").html(logoutButton);
    }

    function buildOpenGamesList(games) {
        var list;

        list += '<div id="open-games-container">' +
        '<h2>Open games</h2>' +
        '<div id="open-games">';

        var objectSourceTemplate = Mustache.compile(document.getElementById("open-games-template").innerHTML);

        list += '<ul class="game-list open-games">';
        for (var i = 0; i < games.length; i++) {
            var game = games[i];
            list += objectSourceTemplate(game);
        }

        list += "</ul>";
        list+= '</div></div>'
        return list;
    }

    function buildActiveGamesList(games) {
        var gamesList = Array.prototype.slice.call(games, 0);
        var list;
        gamesList.sort(function (g1, g2) {
            if (g1.status == g2.status) {
                return g1.title > g2.title;
            }
            else {
                if (g1.status == "in-progress") {
                    return -1;
                }
            }
            return 1;
        });
        
        var objectSourceTemplate = Mustache.compile(document.getElementById("active-games-template").innerHTML);

        list += '<div id="active-games-container">' +
			'<h2>Active games</h2>' +
			'<div id="active-games">';

        list += '<ul class="game-list active-games">';
        for (var i = 0; i < gamesList.length; i++) {
            var game = gamesList[i];
            list += objectSourceTemplate(game);
        }
        list += "</ul>";
        list += "</div></div>";
        return list;
    }

    function buildGameField(gameField) {
        var blue = gameField.blue;
        var red = gameField.red;

        var table = $('<table></table>').addClass('battleField');

        var blueWarriors = $('<tr></tr>');
        for (var i = 0; i <= 4; i++) {
            $('<td></td>').addClass('bluePlayer unit').text(blue.units[i].type).appendTo(blueWarriors);

            if (i == 4) {
                continue;
            }

            $('<td></td>').addClass('empty').text(" ").appendTo(blueWarriors);
        }
        table.append(blueWarriors);

        var blueRangers = $('<tr></tr>');
        for (var i = 5; i < 10; i++) {
            if (i >= 9) {
                $('<td></td>').addClass('empty').text(" ").appendTo(blueRangers);
                continue;
            }
            $('<td></td>').addClass('empty').text(" ").appendTo(blueRangers);
            $('<td></td>').addClass('bluePlayer unit').text(blue.units[i].type).appendTo(blueRangers);
        }
        table.append(blueRangers);


        for (var i = 0; i < 5; i++) {
            var empty = $('<tr></tr>');
            for (var j = 0; j < 9; j++) {
                $('<td></td>').addClass('empty').text(" ").appendTo(empty);
            }
            table.append(empty);
        }


        var redRangers = $('<tr></tr>');
        for (var i = 5; i < 10; i++) {
            if (i >= 9) {
                $('<td></td>').addClass('empty').text(" ").appendTo(redRangers);
                continue;
            }
            $('<td></td>').addClass('empty').text(" ").appendTo(redRangers);
            $('<td></td>').addClass('redPlayer unit').text(blue.units[i].type).appendTo(redRangers);
        }
        table.append(redRangers);


        var redWarriors = $('<tr></tr>');
        for (var i = 0; i <= 4; i++) {
            $('<td></td>').addClass('redPlayer unit').text(blue.units[i].type).appendTo(redWarriors);

            if (i == 4) {
                continue;
            }

            $('<td></td>').addClass('empty').text(" ").appendTo(redWarriors);
        }
        table.append(redWarriors);

        return table;
    }

    //function buildMessagesList(messages) {
    //    var list = "<div id='messages-list-container'> <h2>All game messages</h2>"
    //    list += '<ul class="messages-list">';
    //    var msg;
    //    for (var i = 0; i < messages.length; i += 1) {
    //        msg = messages[i];
    //        var item =
	//			'<li class="single-user-message">' +
	//				'<h3 href="#" class="message-state-' + msg.state + '">' +
	//					msg.text +
	//				'</h3>' +
	//			'</li>';
    //        list += item;
    //    }
    //    list += '</ul></div>';
    //    return list;
    //}

    return {
        logoutButton: buildLogoutButton,
        openGamesList: buildOpenGamesList,
        loginForm: buildLoginForm,
        activeGamesList: buildActiveGamesList,
        gameField: buildGameField,
        //messagesList: buildMessagesList
    }

});